<template>
	<div class="goodsinfo-container">
		
		<transition
		@before-enter="beforeEnter"
		@enter="enter"
		@after-enter="afterEnter">
			<div class="ball" v-show="ballFlag" ref="ball"></div>
		</transition>
		<!-- 轮播图区域 -->
		<div class="mui-card">
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<swiper></swiper>
				</div>
			</div>
		</div>
		
		<!-- 商品区域 -->
		<div class="mui-card">
			<div class="mui-card-header">商品的名称</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p class="price">
						市场价:<del>￥2399</del>&nbsp;&nbsp;销售价:<span class="now_price">￥2199</span>
					</p>
					<p>购买数量:
						<div class="mui-numbox" data-numbox-min='1' data-numbox-max='9'>
							<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
							<input class="mui-input-numbox" type="number" value="1" @change="countChanged" ref="numbox"/>
							<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
						</div>
					</p>
					
					<p>
						<mt-button type="primary" size="small">立即购买</mt-button>
						<mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button>
					</p>
				</div>
			</div>
		</div>
		
		<!-- 商品参数区域 -->
		<div class="mui-card">
			<div class="mui-card-header">商品的参数</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p>商品货号:</p>
					<p>库存情况:</p>
					<p>上架时间:</p>
				</div>
			</div>
			<div class="mui-card-footer">
				<mt-button type="primary" size="large" plain>图文介绍</mt-button>
				<mt-button type="danger" size="large" plain>评论列表</mt-button>
			</div>
		</div>
	</div>
</template>

<script>
	import swiper from '../subcomponents/swiper.vue'
	import mui from "../../lib/mui/dist/js/mui.js"
	
	export default{
		data() {
			return {
				id: this.$route.params.id,
				// 将路由参数对象中的id 挂载到 data 上去，方便以后调用
				ballFlag: false //控制小球隐藏和显示的
			}
		},
		//用来初始化数字选择框组件
		mounted(){
			mui(".mui-numbox").numbox();
		},
		methods: {
			// getLunbotu(){
				// this.$http.get('url').then()
			// },
			//change 来监听数值变化
			countChanged(){
				console.log(this.$refs.numbox.value)
				//将数值传给父组件
				this.$emit("getcount", parseInt(this.$refs.numbox.value))
			},
			addToShopCar(){
				//
				this.ballFlag = !this.ballFlag
			},
			//半场动画的钩子函数
			beforeEnter(el){
			    el.style.transform = "translate(0,0)"
			},
			enter(el,done){
				el.offsetWidth;
				
				var ballPosition = this.$refs.ball.getBoundingClientRect();
				// 给徽标加上ID属性，来获取徽标的位置
				var badgePosition = document.getElementById("badge").getBoundingClientRect()
				var xDist = badgePosition.left - ballPosition.left
				var yDist = badgePosition.top - ballPosition.top
				el.style.transform = `translate(${xDist}px, ${yDist}px)`
				
				
				// el.style.transform="translate(150px, 160px)";
				el.style.transition="all 0.8s cubic-bezier(.48,-0.39,1,.68)";
				done();
			},
			afterEnter(el){
				this.ballFlag = !this.ballFlag;
			}
		},
		components:{
			swiper
		}
	}
</script>

<style scoped>
	.goodsinfo-container{
		background-color: #ccc;
		overflow: hidden;
	}
	.now_price{
		color: red;
		font-size: 16px;
		font-weight: bold;
	}
	.goodsinfo-container .mui-card-footer{
		display: block;
	}
	.goodsinfo-container .mui-card-footer button{
		margin: 10px 0;
	}
	.ball{
		width: 20px;
		height: 20px;
		background-color: red;
		border-radius: 50%;
		position: absolute;
		z-index: 99;
		top: 465px;
		left: 75px;
	}
</style>